<template>
  <div class="app-container" style="padding: 15px!important;">
    <div class="filter_container">
      <el-form :inline="true" :model="commodityform" class="demo-form-inline">
        <el-form-item label="商品名称">
          <el-input v-model.trim="commodityform.name" size="small" clearable placeholder="请输入商品名称" @keyup.enter.native='handleFiltercommodityform'></el-input>
        </el-form-item>
        <el-form-item label="商品类型">
          <el-cascader v-model="categoryId" clearable placeholder="请选择商品类型" :options="categoriesList" @change="selectCategory(categoryId)"
            :show-all-levels="false" ref='categoryIdNameRef'  @keyup.enter.native="$event.target.blur"
            @blur="selectBlur($event)"></el-cascader>
        </el-form-item>
        <el-form-item label="sku码">
          <el-input v-model.trim="commodityform.skuCode" size="small" clearable placeholder="请输入sku码"
            @keyup.enter.native='handleFiltercommodityform'></el-input>
        </el-form-item>
        <el-form-item width="300px">
          <el-checkbox v-model="clickFramingchecked" border="" size="small">
            <span>全国</span>
          </el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="handleFiltercommodityform" icon="el-icon-search" size="small">查询</el-button>
        </el-form-item>
        <!--   <el-form-item>
          <div style="border:none" class="addshop">
            <el-button type="success" plain size="small" @click="handleAdd" icon="el-icon-circle-plus-outline" style="width:90px;">新建商品</el-button>
            <div v-show="showbutton" class="showbutton">
              <span @click="handleSingleproduct">单个商品</span>
              <span @click="handleCommodity">组合商品</span>
            </div>
          </div>
        </el-form-item> -->
      </el-form>
    </div>
    <el-table :key="tableKey" class='table_lists' :data="commodityList" border="" fit highlight-current-row style="width: 100%;padding:"
      :row-class-name="tableRowClassName">
      <el-table-column label="商品ID" prop align="center" width='145px'>
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="单号" prop align="center" width='130px'>
        <template slot-scope="{row}">
          <span>{{ row.xmbzNo }}</span>
        </template>
      </el-table-column>
      <el-table-column label="渠道" prop align="center" width='70px'>
        <template slot-scope="{row}">
          <span>{{ row.channelName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="生成时间" prop align="center" width='160px'>
        <template slot-scope="{row}">
          <span>{{ row.createTime }}</span>
        </template>
      </el-table-column>

      <el-table-column label="sku码" prop align="center" width='160px'>
        <template slot-scope="{row}">
          <span v-for="item in row.goodsSkuS" v-if="row.goodsSkuS.length>1">{{ item.skuCode }}/ </span>
          <span v-for="item in row.goodsSkuS" v-else>{{ item.skuCode }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" prop align="center">
        <template slot-scope="{row}">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品类型" prop align="center" width='70px'>
        <template slot-scope="{row}">
          <span>{{ row.categoryName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品状态" prop="goodsState" align="center" width='70px'>
        <template slot-scope="{row}">
          <span>{{ row.goodsStateName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" prop fixed='right' align="center" width='130px'>
        <template slot-scope="{row}">
          <el-button type="warning" size="mini" @click="row.isCombination=='1'?handleDeit(row):handlecomDeit(row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="commodityform.page" :limit.sync="commodityform.size" layout="sizes,prev, pager, next,total"
      @pagination="getList" />
    <!-- 单个商品 -->
    <el-dialog :title="textSingleproduct[dialogStatus]" :visible.sync="dialogFormVisible" :show-close="false" class="Singleproduct"
      width="60%">
      <el-form :model="SingleproductForm" :rules="Singleproductrules" ref="SingleproductForm" label-width="100px" class="demo-ruleForm"
        @click.stop>
        <el-form-item label="商品名称" prop="name">
          <!--  <el-input v-model.trim="SingleproductForm.name" style="width:200px" size="small" v-if="dialogStatus=='create'"></el-input>
          <el-input v-model.trim="SingleproductForm.name" style="width:200px" size="small" v-if="dialogStatus=='update'"></el-input> -->
          <el-input v-model.trim="SingleproductForm.name" style="width:300px" size="small" v-if="dialogStatus=='create'"
            type="textarea" maxlength="64" show-word-limit :autosize="{ minRows: 4, maxRows:6}"></el-input>
          <el-input v-model.trim="SingleproductForm.name" style="width:300px" size="small" v-if="dialogStatus=='update'"
            type="textarea" maxlength="64" show-word-limit :autosize="{ minRows: 4, maxRows:6}"></el-input>

        </el-form-item>
        <el-form-item label="蛋糕类型" v-if="dialogStatus=='create'">
          <el-cascader ref="cascaderAddr" v-model="selectedValue" :options="cakelist" clearable @change="handelcategoryName"
            @visible-change='getcakelist'></el-cascader>
        </el-form-item>
        <el-form-item label="蛋糕类型" v-if="dialogStatus=='update'">
          <el-cascader ref="cascaderAddr" v-model="selectedValue" :options="cakelist" clearable @change="handelcategoryName"
            @visible-change='getcakelist'></el-cascader>
          <el-tag closable :disable-transitions="false" @close="handleClose" v-if="GoodsInfocakeType">{{GoodsInfocakeType}}</el-tag>
        </el-form-item>
        <el-form-item label="商品原料" v-if="dialogStatus=='create'" v-show="materialsShow">
          <ele-multi-cascader clearable v-model="materialslistValue" :options="materialslist" @on-selected="getSelected"
            :inputValue="configTips" separator=">" placeholder="选择商品原料" @change="handlematerialName" style="width: 194px;">
          </ele-multi-cascader>
        </el-form-item>
        <el-form-item label="商品原料" v-if="dialogStatus=='update'" v-show="materialsShow">
          <ele-multi-cascader clearable v-model="materialslistValue" :options="materialslist" @on-selected="getSelected"
            :inputValue="configTips" separator=">" placeholder="选择商品原料" @change="handlematerialName" style="width: 194px;">
          </ele-multi-cascader>
          <div>
            <span style="margin-right:10px ;" v-if='checkedmaterialslist&&checkedmaterialslist.length'>已选：</span>
            <el-tag v-for="(tag,index) in checkedmaterialslist" :key="index" closable :disable-transitions="false"
              @close="handlecommodityindexClose(tag,index)">{{tag.materialName}}</el-tag>
          </div>
        </el-form-item>
        <el-form-item label="商品主图:" prop="mainPic" required>
          <div style="margin-bottom: 15px;">
            <el-upload list-type="picture-card" action="/api/xmbz-goods/file/upload" :show-file-list="false" :data="{tag:'good'}"
              :on-success="handleAvatarSuccess" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
              <img v-if="SingleproductForm.mainPic&&SingleproductForm.mainPic.length" :src="SingleproductForm.mainPic"
                class="avatar">
              <i v-else class="el-icon-plus"></i>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="商品副图:" prop="title" v-if="dialogStatus=='create'">
          <div style="margin-bottom: 15px;">
            <el-upload action="/api/xmbz-goods/file/upload" :data="{tag:'good'}" :on-exceed="handleExceed" list-type="picture-card"
              :limit="4" :on-success="handleftSuccess" :file-list="SingleproductForm.pics" :on-remove="beforeRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </div>
        </el-form-item>
        <el-form-item label="商品副图:" prop="title" v-if="dialogStatus=='update'">
          <div style="margin-bottom: 15px;">
            <el-upload action="/api/xmbz-goods/file/upload" :data="{tag:'good'}" :on-exceed="handleExceed" list-type="picture-card"
              :on-success="handleftSuccess" :limit="4" :file-list="SingleproductForm.pics" :on-remove="beforeRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </div>
        </el-form-item>
        <el-form-item label="商品详情:">
          <el-input type="textarea" size="small" v-model.trim="SingleproductForm.description" style="width:400px"
            maxlength="300" show-word-limit :autosize="{ minRows: 6, maxRows:8}" v-if="dialogStatus=='create'"></el-input>
          <el-input type="textarea" size="small" v-model.trim="SingleproductForm.description" style="width:400px"
            maxlength="300" show-word-limit :autosize="{ minRows: 6, maxRows:8}" v-if="dialogStatus=='update'"></el-input>
        </el-form-item>
        <hr>
        <h2>商品规格</h2>
        <div class="specifications">
          <div class="rows" v-for="(item,index) in SingleproductForm.goodsSkuRequests" :key="index">
            <el-form-item label="规格">
              <el-input size="small" v-model.trim="item.specs" maxlength="20" style="width:100px">
              </el-input>
            </el-form-item>
            <el-form-item label="定价(元)" v-if="dialogStatus=='update'">
              <el-input size="small" type='number' v-model.trim="item.modifyPrice" :min='0' oninput="if(value.length>7)value=value.slice(0,7)"
                style="width:100px" v-if="dialogStatus=='update'"></el-input>
            </el-form-item>
            <el-form-item label="定价(元)" v-if="dialogStatus=='create'">
              <el-input size="small" type='number' v-model.trim="item.price" :min='0' oninput="if(value.length>7)value=value.slice(0,7)"
                style="width:100px"></el-input>
            </el-form-item>
            <el-form-item label="sku码">
              <el-input size="small" v-model.trim="item.skuCode" style="width:100px" onkeyup="value=value.replace(/[^\-?\d.]/g,'').slice(0,20)"
                maxlength="20" onafterpaste="value=value.replace(/[^\-?\d.]/g,'').slice(0,20)"></el-input>
            </el-form-item>
            <el-form-item label="upc码">
              <el-input size="small" type='number' v-model.trim="item.upc" :min='0' style="width:100px" maxlength="50"
                onkeyup="value=value.replace(/[^\d]|^[0]/g,'').slice(0,50)" onafterpaste="value=value.replace(/[^\d]|^[0]/g,'').slice(0,50)"></el-input>
            </el-form-item>
            <el-form-item label="商品状态">
              <el-radio-group v-model="item.goodsState">
                <el-radio :label="1">可售</el-radio>
                <el-radio :label="2">不可售</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <div class="Delete_specification" @click="handleDelete_specification(index)">
                <img :src="icondelete" alt="" class="icondelete">
                <span>移除</span>
              </div>
            </el-form-item>
          </div>
          <div class="title" @click="handleAdd_specification">
            <img :src="iconadd" alt="">添加规格，最多10个
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogStatus==='create'?handelDialogReset(SingleproductForm,'SingleproductForm'):handelDialogResetupdate(SingleproductForm,'SingleproductForm')">取
          消</el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createSingleData(SingleproductForm,'SingleproductForm'):updateSingleData(SingleproductForm,GoodsInfocakeType,'SingleproductForm')">
          确
          定
        </el-button>
      </div>
    </el-dialog>
    <!-- 组合商品 -->
    <el-dialog :title="textCommodity[diaCommodityStatus]" :visible.sync="dialogCommodityVisible " :show-close="false"
      class="Commodityproduct">
      <el-form :model="CommodityFormList" :rules="Commodityrules" ref="CommodityFormList" label-width="120px" class="demo-ruleForm"
        @click.stop>
        <el-form-item label="组合商品名称" prop="name">
          <el-input v-model.trim="CommodityFormList.name" style="width:200px" size="small" v-if="diaCommodityStatus=='create'"
            type="textarea" maxlength="64" show-word-limit :autosize="{ minRows: 4, maxRows:6}"></el-input>
          <el-input v-model.trim="CommodityFormList.name" style="width:200px" size="small" v-if="diaCommodityStatus=='update'"
            type="textarea" maxlength="64" show-word-limit :autosize="{ minRows: 4, maxRows:6}"></el-input>
        </el-form-item>
        <el-form-item label="蛋糕类型" v-if="diaCommodityStatus=='create'">
          <el-cascader ref="cascaderAddr" v-model="selectedValue" :options="cakelist" clearable @change="handelcategoryzeName"
            @visible-change='getcakelist'></el-cascader>
        </el-form-item>
        <el-form-item label="蛋糕类型" v-if="diaCommodityStatus=='update'">
          <el-cascader ref="cascaderAddr" v-model="selectedValue" :options="cakelist" clearable @change="handelcategoryzeName"
            @visible-change='getcakelist'></el-cascader>
          <el-tag closable :disable-transitions="false" @close="handlecommodityClose(GoodsInfocakeTypeIds)" v-if="GoodsInfocakeType">{{GoodsInfocakeType}}</el-tag>
        </el-form-item>
        <el-form-item label="商品原料" v-show="materialsShow" v-if="diaCommodityStatus=='create'">
          <ele-multi-cascader clearable v-model="materialslistValue" :options="materialslist" separator=">" placeholder="选择商品原料"
            @change="handlematerialzhName" style="width: 194px;">
          </ele-multi-cascader>
        </el-form-item>
        <el-form-item label="商品原料" v-show="materialsShow" v-if="diaCommodityStatus=='update'">
          <ele-multi-cascader clearable v-model="materialslistValue" :options="materialslist" separator=">" placeholder="选择商品原料"
            @change="handlematerialzhName" style="width: 194px;">
          </ele-multi-cascader>
          <div>
            <span style="margin-right:10px ;" v-if='checkedmaterialslist&&checkedmaterialslist.length'>已选：</span>
            <el-tag v-for="(tag,index) in checkedmaterialslist" :key="index" closable :disable-transitions="false"
              @close="handlecommodityindexClose(tag,index)">{{tag.materialName}}</el-tag>
          </div>
        </el-form-item>
        <el-form-item label="商品主图:" prop="mainPic" required>
          <div style="margin-bottom: 15px;">
            <div style="margin-bottom: 15px;">
              <el-upload list-type="picture-card" action="/api/xmbz-goods/file/upload" :show-file-list="false" :data="{tag:'good'}"
                :on-success="handleCombinedSuccess" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                <img v-if="CommodityFormList.mainPic" :src="CommodityFormList.mainPic" class="avatar">
                <i v-else class="el-icon-plus"></i>
              </el-upload>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="商品副图:" prop="title" v-if="diaCommodityStatus=='create'">
          <div style="margin-bottom: 15px;">
            <el-upload action="/api/xmbz-goods/file/upload" :data="{tag:'good'}" :file-list="SingleproductForm.pics"
              list-type="picture-card" :on-success="handlezhfuSuccess" :on-remove="beforezhRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </div>
        </el-form-item>
        <el-form-item label="商品副图:" prop="title" v-if="diaCommodityStatus=='update'">
          <div style="margin-bottom: 15px;">
            <el-upload action="/api/xmbz-goods/file/upload" :data="{tag:'good'}" :on-exceed="handleExceed" list-type="picture-card"
              :on-success="handleftSuccess" :limit="4" :file-list="CommodityFormList.pics" :on-remove="beforezhRemove"
              v-if='this.SingleproductForm.pics'>
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" v-if='CommodityFormList.pics' :src="dialogImageUrl" alt="">
            </el-dialog>
          </div>
        </el-form-item>
        <el-form-item label="商品详情:">
          <el-input type="textarea" size="small" v-model.trim="CommodityFormList.description" style="width:400px"
            maxlength="300" show-word-limit :autosize="{ minRows: 6, maxRows:8}"></el-input>
        </el-form-item>
        <hr>
        <div class="specifications">
          <h2>组合选项</h2>
          <el-form-item label="商品名称" prop="goodsCombinationList" style="position:relative">
            <el-input v-model="CommodityFormList.commodityserch" style="width:200px" size="small" placeholder="请输入商品名称搜索"
              @blur="handlecommodityserch(CommodityFormList.commodityserch)"></el-input>
            <div v-if='CommodityFormList.goodsCombinationList'>
              <span style="margin-right:10px ;" v-if=' CommodityFormList.goodsCombinationList&& CommodityFormList.goodsCombinationList.length'>已选：</span>
              <el-tag v-for="(tag,index) in CommodityFormList.goodsCombinationList" :key="index" closable
                :disable-transitions="false" @close="handlegoodListClose(tag,index)">{{tag.zuGoodsName}}~{{tag.zuSpecs}}</el-tag>
            </div>
            <div class="specificationsslist" v-if="commodityserchshow">
              <el-tabs :tab-position="tabPosition" style="height: 200px;">
                <el-tab-pane v-for="(item,index) in combinedData" :key="index" :label="item.name" v-if="combinedData&&combinedData.length>0">
                  <p v-for="(child2,index2) in item.goodsSkuList" :key="index2" @click="handleGoodsList(item.name,child2.specs,child2.id)"
                    style="120px">{{child2.specs}}</p>
                </el-tab-pane>
              </el-tabs>
              <div class="close">
                <i class="el-icon-error Delgoodlist" @click="headleclose"></i>
              </div>
            </div>
          </el-form-item>
          <!--  <el-form-item label="商品名称" prop="goodsCombinationList" style="position:relative">
           <el-cascader placeholder="试试搜索：商品名称" :multiple-limit='10' :limit='10' :options="combinedData" :props="{ multiple: true }"
              filterable v-if="diaCommodityStatus=='create'" @visible-change='handlecommodityserch'></el-cascader>
  <el-cascader placeholder="试试搜索：商品名称" :multiple-limit='10' :limit='10' :options="combinedData" :props="{ multiple: true }"
              filterable v-if="diaCommodityStatus=='update'" @visible-change='handlecommodityserch'></el-cascader>
           <el-input v-model="CommodityFormList.commodityserch" style="width:200px" size="small" placeholder="请输入商品名称搜索"
              @input="handlecommodityserch(CommodityFormList.commodityserch)"></el-input>
            <div v-if='CommodityFormList.goodsCombinationList'>
              <span style="margin-right:10px ;" v-if=' CommodityFormList.goodsCombinationList&& CommodityFormList.goodsCombinationList.length'>已选：</span>
              <el-tag v-for="(tag,index) in CommodityFormList.goodsCombinationList" :key="index" closable
                :disable-transitions="false" @close="handlegoodListClose(tag,index)">{{tag.zuGoodsName}}~{{tag.zuSpecs}}</el-tag>
            </div>
            <div class="specificationsslist" v-if="commodityserchshow">
              <el-tabs :tab-position="tabPosition" style="height: 200px;">
                <el-tab-pane v-for="(item,index) in combinedData" :key="index" :label="item.name" v-if="combinedData&&combinedData.length>0">
                  <p v-for="(child,index2) in item.goodsSkuList" :key="index2" @click="handleGoodsList(item.name,child.specs,child.id)"
                    v-if='item.goodsSkuList'>{{child.specs}}</p>
                </el-tab-pane>
              </el-tabs>
              <div class="close">
                <i class="el-icon-error Delgoodlist" @click="headleclose"></i>
              </div>
            </div>
          </el-form-item> -->
          <div class="lows">
            <el-form-item label="sku码">
              <el-input size="small" v-model.trim="CommodityFormList.skuCode" :min='0' style="width:100px" onkeyup="value=value.replace(/[^\-?\d.]/g,'').slice(0,20)"
                maxlength="20" onafterpaste="value=value.replace(/[^\-?\d.]/g,'').slice(0,20)"></el-input>
            </el-form-item>
            <el-form-item label="upc码">
              <el-input size="small" type='number' v-model.trim="CommodityFormList.upc" :min='0' style="width:100px"
                maxlength="50" onkeyup="value=value.replace(/[^\d]|^[0]/g,'').slice(0,50)" onafterpaste="value=value.replace(/[^\d]|^[0]/g,'').slice(0,50)"></el-input>
            </el-form-item>
            <el-form-item label="定价(元)" v-if="diaCommodityStatus=='create'">
              <el-input size="small" type='number' v-model.trim="CommodityFormList.price" :min='0' oninput="if(value.length>7)value=value.slice(0,7)"
                style="width:100px"></el-input>
            </el-form-item>
            <el-form-item label="定价(元)" v-if="diaCommodityStatus=='update'">
              <el-input size="small" type='number' v-model.trim="CommodityFormList.zuModifyPrice" :min='0' oninput="if(value.length>7)value=value.slice(0,7)"
                style="width:100px"></el-input>
            </el-form-item>
            <el-form-item label="商品状态">
              <el-radio-group v-model="CommodityFormList.goodsState">
                <el-radio :label="1">可售</el-radio>
                <el-radio :label="2">不可售</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handelDialogResetCommodity(CommodityFormList,'CommodityFormList')">取 消</el-button>
        <el-button type="primary" @click="diaCommodityStatus==='create'?createcommodityData(CommodityFormList,'CommodityFormList'):updatecommodityData(CommodityFormList,GoodsInfocakeType,'CommodityFormList')">
          确
          定
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {
    Categories, // 商品类型
    GoodsMaterial, //商品原料
    CakeWhereaboutsList, //商品状态
    addGoods, //添加商品
    getQueryMaintainGoodsPage, //列表
    searchGoodsList, //搜索
    deleteGoods, //删除
    GoodsInfo, //详情
    goodsUpdate //更新提交
  } from "@/api/commodityfiles";
  //引入图片
  import Pagination from "@/components/Pagination"; //分页
  import select from "@/assets/image/selected.png";
  import iconadd from "@/assets/image/icon_add.png";
  import icondelete from "@/assets/image/icon_delete.png";
  import groupnodataimg from "@/assets/image/groupnodata.png";
  export default {
    components: {
      Pagination
    },
    data() {

      return {
        props: {
          multiple: true
        },
        groupnodataimg,
        // start------------------------------------------------------------
        select, //引入图标
        iconadd, //引入图标
        icondelete, //引入图标
        // 列表部分------------------------------------------------------------
        commodityform: {
          //查询条件
          deptId: '',
          name: "", //商品名称
          // goodsState: "", //商品状态
          categoryId: "", //商品类型
          skuCode: '',
          // maintain: '', //维护类型
          page: 1,
          size: 10
        },
        GoodsInfocakeType: "",
        GoodsInfocakeTypeIds: '',
        PoundstatusList: [], //商品状态
        categoriesList: [], //商品类型列表
        categoryId: [], //商品类型列表
        commodityList: [
          // 商品列表
        ],
        materialsShow: true,
        // 单个商品------------------------------------------------------------
        textSingleproduct: {
          update: "修改单个商品",
          create: "添加单个商品"
        },
        materialsNameList: [],
        SelectedmaterialsList: [],
        picList: [],
        goodsPicList: [],
        clickFramingchecked: true, //全国

        //组合商品------------------------------------------------------------
        fileList: [],
        combinedData: [],
        Commoditymaterials: "",
        dialogImageUrl: "",
        dialogVisible: false,
        tabPosition: "left",
        tableKey: 0,
        total: 0,
        listLoading: true,
        showbutton: false,
        activeNames: ["1"],

        textCommodity: {
          update: "修改组合商品",
          create: "添加组合商品"
        },
        dialogFormVisible: false, //单个商品
        dialogCommodityVisible: false, //组合商品
        caketype: false,
        materials: false,
        dialogStatus: "",
        diaCommodityStatus: "",
        formLabelWidth: "120px",
        shoptype: [], //商品类型
        SingleproductForm: {
          name: "",
          cakeType: "",
          categoryId: "",
          materialId: "",
          Commoditymaterials: "", // 商品原料
          mainPic: "", //  主图
          pics: [], //附图
          description: "",
          isOnSale: '',
          goodsSkuRequests: [{
            specs: "", //规格名
            price: "", // 定价
            skuCode: "", // sku 码
            upc: "", // uPc
            goodsState: 1, //商品状态
            isCombination: 1
          }]
        },
        // commodityserch:[],
        Singleproductrules: {
          name: [{
            required: true,
            message: "请输入商品名称",
            trigger: "blur"
          }],
          commodityserch: [{
            required: true,
            message: "请输入商品名称",
            trigger: "change"
          }],
          mainPic: [{
            required: true,
            message: "请上传商品主图",
            trigger: "blur"
          }],
          cakeType: [{
            required: true,
            message: "请至少选择一个商品类型",
            trigger: "change"
          }],
          Commoditymaterials: [{
            required: true,
            message: "请至少选择一个商品原料",
            trigger: "change"
          }],
          specs: [{
            required: true,
            message: "请输入商品规格",
            trigger: "blur"
          }],
          skuCode: [{
            required: true,
            message: "请输入商品sku码",
            trigger: "blur"
          }],
          upc: [{
            required: true,
            message: "请输入商品upc码",
            trigger: "blur"
          }],
          price: [{
            required: true,
            message: "请输入商品定价",
            trigger: "blur"
          }]
        },
        Commodityrules: {
          name: [{
            required: true,
            message: "请输入商品名称",
            trigger: "blur"
          }],
          commodityserch: [{
            required: true,
            message: "请输入商品名称",
            trigger: "change"
          }],
          mainPic: [{
            required: true,
            message: "请上传商品主图",
            trigger: "blur"
          }],
          Commoditymaterials: [{
            required: true,
            message: "请至少选择一个商品原料",
            trigger: "change"
          }],
          specs: [{
            required: true,
            message: "请输入商品规格",
            trigger: "blur"
          }],
          skuCode: [{
            required: true,
            message: "请输入商品sku码",
            trigger: "blur"
          }],
          upc: [{
            required: true,
            message: "请输入商品upc码",
            trigger: "blur"
          }],
          price: [{
            required: true,
            message: "请输入商品定价",
            trigger: "blur"
          }]
        },
        materialslist: [],
        materialslists: [],
        combinedDataCode: [],
        combinedDataName: [], // 组合数据
        checkedmaterialslist: [],
        cakelist: [],
        // 组合商品
        commodityserchshow: false,
        checkboxGroup1: [],
        CommodityFormList: {
          name: "",
          cakeType: "",
          categoryId: "",
          materialId: "",
          description: "",
          Commoditymaterials: "", // 商品原料
          mainPic: "", //  主图
          pics: [], //附图
          commodityserch: "",
          goodsState: 1, //商品状态
          goodsCombinationList: [], //组合数据
          price: "", // 定价
          skuCode: "", // sku 码
          upc: "", // uPc
          zuModifyPrice: '',
          isOnSale: ''
        },
        cityareaId: '',
        materialName: '',
        checkList: [],
        selectedValue: [],
        materialslistValue: [],
        configTips: null,
        maintainList: [{
          dictKey: 1,
          dictValue: "已维护",
        }, {
          dictKey: 3,
          dictValue: "未维护",
        }],
        // 维护类型
      };
    },
    destroyed() {
      window.removeEventListener("keydown", this.keyDown, false);
    },
    watch: {
        'dialogFormVisible'() {
          if(this.dialogFormVisible) {
            window.removeEventListener("keydown",this.keyupEnter);
          } else {
            window.addEventListener("keydown",this.keyupEnter);
          }
        },
        'dialogCommodityVisible'() {
          if(this.dialogCommodityVisible) {
            window.removeEventListener("keydown",this.keyupEnter);
          } else {
            window.addEventListener("keydown",this.keyupEnter);
          }
        },
      },

    mounted() {
      var saberareaIds = JSON.parse(localStorage.getItem('saber-areaId'));
      this.cityareaId = saberareaIds['content']
      this.getList();
      this.getCategoriesList(); //查蛋糕类型
      // this.getcakelist(); //查蛋糕类型
      this.getGoodsMaterial(); // 原料
      // this.handlecommodityserch();
      this.getCakeWhereaboutsList(); // 商品状态
      window.addEventListener("keydown", this.keyupEnter);

    },
    methods: {
      // 选择框回车失焦
      selectBlur(e) {
        if (e.keyCode == 13) {
          this.$refs['categoryIdNameRef'].blur();
          e.returnValue = false;
        }
      },

      // 回车事件
      keyupEnter() {
        if (this.dialogFormVisible && this.dialogCommodityVisible) {
          if (window.event.keyCode == 13) {
            this.handleFiltercommodityform(); // 查询事件
          }
        } else {
          window.removeEventListener("keydown", this.keyupEnter);
        }

      },
      //如果页面有keep-alive缓存功能，这个函数会触发
      activated() {
        window.addEventListener("keydown", this.keyupEnter);
      },
      deactivated() {
        window.removeEventListener("keydown", this.keyupEnter);
      },
      // 公共部分--------------------------------------------------------------------------------
      tableRowClassName({ //表格样式
        row
      }) {
        if (row.isOnSale === 3) {
          return 'warning-row';
        }
        return '';
      },
      getCakeWhereaboutsList() {
        CakeWhereaboutsList("").then(response => {
          this.PoundstatusList = response.data.data;
        });
      },
      getcakelist() {
        Categories("").then(response => {
          // this.cakelist = response.data.data;
          const batchdata = response.data.data;
          const dataValueBatch = batchdata =>
            batchdata.map(
              ({
                id,
                categoryName,
                children
              }) =>
              children ? {
                value: id,
                label: categoryName,
                children: dataValueBatch(children),

              } : {
                value: id,
                label: categoryName
              }
            );
          this.cakelist = dataValueBatch(batchdata);
        });
      },
      handelTabs(tab) {
        this.materialName = tab.label;
        if (tab.label == "蛋糕") {
          this.materialsShow = true;
        } else {
          this.materialsShow = false;
        }
      },
      getSelected(val) {

      },
      getCategoriesList() {
        //蛋糕类型
        Categories("").then(response => {
          const batchdata = response.data.data;
          const dataValueBatch = batchdata =>
            batchdata.map(
              ({
                id,
                categoryName,
                children
              }) =>
              children ? {
                value: id,
                label: categoryName,
                children: dataValueBatch(children)
              } : {
                value: id,
                label: categoryName
              }
            );
          this.categoriesList = dataValueBatch(batchdata);
          setTimeout(() => {
            this.listLoading = false;
          }, 1.5 * 1000);
        });
      },
      getGoodsMaterial() {
        //商品原料
        GoodsMaterial("").then(response => {
          const batchdata = response.data.data;
          const dataValueBatch = batchdata =>
            batchdata.map(
              ({
                id,
                materialName,
                children
              }) =>
              children ? {
                value: id,
                label: materialName,
                children: dataValueBatch(children),
                disabled: true,
              } : {
                value: id,
                label: materialName
              }
            );
          this.materialslist = dataValueBatch(batchdata);
        });
      },

      selectCategory(selected) {
        //选择蛋糕类型
        this.commodityform.categoryId = selected;
      },
      // 商品列表页面部分
      handleFiltercommodityform() {
        this.showbutton = false;
        //查询
        if (
          this.commodityform.categoryId &&
          this.commodityform.categoryId.length
        ) {
          this.commodityform.categoryId = this.commodityform.categoryId[
            this.commodityform.categoryId.length - 1
          ];
        }
        this.commodityform.page = 1;
        this.getList();

      },
      handleAdd() {
        // 新建商品
        this.showbutton = !this.showbutton;
      },
      getList() {
        //列表数据
        this.listLoading = true;
        if (this.clickFramingchecked == true) {
          this.commodityform.deptId = 1;
        } else {
          this.commodityform.deptId = this.cityareaId;
        }
        getQueryMaintainGoodsPage(this.commodityform).then(response => {
          this.commodityList = response.data.data.rows;
          this.total = response.data.data.total;
          setTimeout(() => {
            this.listLoading = false;
          }, 1.5 * 1000);
        });
      },
      handleDelete(row) {
        if (row.deptId == 1) {
          if (this.clickFramingchecked == true) {
            this.$confirm("删除商品后,全国其他城市同一商品会同步删除,是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              })
              .then(() => {
                deleteGoods({
                  goodsId: row.id
                }).then(() => {
                  this.$message({
                    type: "success",
                    message: "删除成功!"
                  });
                  this.getList();
                });
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消删除"
                });
              });
          } else {
            this.$message({
              type: 'warning',
              message: '不能删除该商品,需要勾选全国按钮去编辑'
            });
            return false
          }
        } else {
          this.showbutton = false;
          this.$confirm("是否删除该城市下的当前商品?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
            .then(() => {
              deleteGoods({
                goodsId: row.id
              }).then(() => {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.getList();
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除"
              });
            });

        }
      },
      handleCaketype() {
        this.caketype = !this.caketype;
        this.getcakelist();
      },
      handleMaterials() {
        this.materials = !this.materials;
        this.materialsNameList = [];
        this.getGoodsMaterial()
      },

      // 图片上传
      // 图片预览及删除
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      // 单个主图开始上传
      handleAvatarSuccess(response, file, fileList) {
        this.SingleproductForm.mainPic = response.data;
        console.log(fileList);
      },
      handleExceed(files, fileList) {
        this.$message.warning(
          `当前限制选择 4 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
        );
      },
      beforeRemove(index) {
        this.SingleproductForm.pics.splice(index, 1);
      },
      beforezhRemove(index) {
        this.CommodityFormList.pics.splice(index, 1);
      },
      // 组合
      handleCombinedSuccess(response) {
        this.CommodityFormList.mainPic = response.data;
      },
      // 幅图上传
      handleftSuccess(response) {
        this.SingleproductForm.pics.push({
          url: response.data
        });
      },
      // 组合幅图上传
      handlezhfuSuccess(response) {
        this.CommodityFormList.pics.push({
          url: response.data
        });
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handlePictureCardPreviewFigure(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      // 单个商品-----------------------------------------------
      handleSingleproduct() {
        //添加单个商品
        this.dialogStatus = "create";
        this.showbutton = !this.showbutton;
        this.dialogFormVisible = true;
        this.SingleproductForm.pics = [];
        this.dialogImageUrl = '';
        this.getcakelist(); //查蛋糕类型
        this.SingleproductForm.categoryId = [];
        this.selectedValue = [];
        this.materialslistValue = [];
        this.SingleproductForm = {
          name: "",
          cakeType: "",
          categoryId: "",
          materialId: "",
          Commoditymaterials: "", // 商品原料
          mainPic: "", //  主图
          pics: [], //附图
          description: "",
          goodsSkuRequests: [{
            specs: "", //规格名
            price: "", // 定价
            skuCode: "", // sku 码
            upc: "", // uPc
            goodsState: 1, //商品状态
            isCombination: 1
          }]
        };
      },
      handleDeit(item) { //单个编辑页面
        if (item.deptId == 1) {
          if (this.clickFramingchecked == true) {
            //城市ID为1及选中全国
            this.$confirm('编辑商品后,全国其他城市同一商品会同步修改, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.showbutton = false;
              var materialIdlsit = [];
              //单个编辑页面
              this.getCategoriesList();
              this.getcakelist();
              this.dialogStatus = "update";
              this.dialogFormVisible = true;
              if (item.parentCategoryId) {
                if (item.parentCategoryId == '1670323326059520') {
                  this.materialsShow = true;
                } else {
                  this.materialsShow = false;
                }
              }
              GoodsInfo({
                goodsId: item.id
              }).then(response => {
                this.SingleproductForm.name = response.data.data.name;
                this.SingleproductForm.categoryId = response.data.data.categoryId;
                this.SingleproductForm.id = response.data.data.id;
                this.SingleproductForm.mainPic = response.data.data.mainPic;

                this.SingleproductForm.description = response.data.data.description;
                this.GoodsInfocakeType = item.categoryName;
                this.GoodsInfocakeTypeIds = item.categoryId;
                this.checkedmaterialslist =
                  response.data.data.goodsRelationMaterialVOList;
                this.checkedmaterialslist.map(child => {
                  materialIdlsit.push(child.id);
                });
                this.SingleproductForm.materialId = materialIdlsit;
                this.SingleproductForm.pics = response.data.data.goodsPicList;
                this.goodsPicList = response.data.data.goodsPicList;
                this.SingleproductForm.goodsSkuRequests =
                  response.data.data.goodsSkuList;
                this.SingleproductForm.pics.map(child => {
                  child.url = child.pic;
                });
              });

            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消修改'
              });
            });

          } else {
            this.$message({
              type: 'warning',
              message: '不能编辑该商品,需要勾选全国按钮去编辑'
            });
            return false
          }

        } else {
          this.showbutton = false;
          var materialIdlsit = [];
          //单个编辑页面
          this.getCategoriesList();
          this.getcakelist();
          this.dialogStatus = "update";
          this.dialogFormVisible = true;
          if (item.parentCategoryId) {
            if (item.parentCategoryId == '1670323326059520') {
              this.materialsShow = true;
            } else {
              this.materialsShow = false;
            }
          }
          GoodsInfo({
            goodsId: item.id
          }).then(response => {
            this.SingleproductForm.name = response.data.data.name;
            this.SingleproductForm.categoryId = response.data.data.categoryId;
            this.SingleproductForm.id = response.data.data.id;
            this.SingleproductForm.mainPic = response.data.data.mainPic;
            this.SingleproductForm.description = response.data.data.description;
            this.GoodsInfocakeType = item.categoryName;
            this.GoodsInfocakeTypeIds = item.categoryId;
            this.checkedmaterialslist =
              response.data.data.goodsRelationMaterialVOList;
            this.checkedmaterialslist.map(child => {
              materialIdlsit.push(child.id);
            });
            this.SingleproductForm.materialId = materialIdlsit;
            this.SingleproductForm.pics = response.data.data.goodsPicList;
            this.goodsPicList = response.data.data.goodsPicList;
            this.SingleproductForm.goodsSkuRequests =
              response.data.data.goodsSkuList;
            this.SingleproductForm.pics.map(child => {
              child.url = child.pic;
            });
          });

        }

      },
      handleClose() {
        this.GoodsInfocakeType = "";
        this.SingleproductForm.cakeType = "";
        this.SingleproductForm.categoryId = ''
      },
      handlecommodityClose() {
        this.GoodsInfocakeType = "";
        this.CommodityFormList.cakeType = "";
        this.CommodityFormList.categoryId = ''
      },
      handleindexClose(tag, index) {
        this.checkedmaterialslist.splice(index, 1);
        this.getGoodsMaterial();

      },
      handlecommodityindexClose(tag, index) {
        this.checkedmaterialslist.splice(index, 1);
        this.getGoodsMaterial();
      },
      handlegoodListClose(tag, index) {
        this.CommodityFormList.goodsCombinationList.splice(index, 1);
      },
      handelDialogReset(verification, SingleproductForm) {
        //取消单个商品页面
        this.dialogFormVisible = false;
        this.dialogStatus = "create";
        this.$refs[SingleproductForm].resetFields();
        this.dialogFormVisible = false;
        this.cakelist = [];
        this.SingleproductForm = {
          name: "",
          cakeType: "",
          categoryId: "",
          materialId: "",
          Commoditymaterials: "", // 商品原料
          mainPic: "", //  主图
          pics: [], //附图
          description: "",
          goodsSkuRequests: [{
            specs: "", //规格名
            price: "", // 定价
            skuCode: "", // sku 码
            upc: "", // uPc
            goodsState: 1, //商品状态
            isCombination: 1
          }]
        };
      },
      handelDialogResetupdate(verification, SingleproductForm) {
        this.dialogStatus = "update";
        // this.$refs[SingleproductForm].resetFields();
        this.dialogFormVisible = false;
        this.cakelist = [];
        this.SingleproductForm = {
          name: "",
          cakeType: "",
          categoryId: "",
          materialId: "",
          Commoditymaterials: "", // 商品原料
          mainPic: "", //  主图
          pics: [], //附图
          description: "",
          goodsSkuRequests: [{
            specs: "", //规格名
            price: "", // 定价
            skuCode: "", // sku 码
            upc: "", // uPc
            goodsState: 1, //商品状态
            isCombination: 1
          }]
        };
      },
      handelcancelType() {
        this.SingleproductForm.cakeType = "";
        this.caketype = !this.caketype;
      },
      handelcancelMaterials() {
        this.SingleproductForm.Commoditymaterials = "";
        this.materials = !this.materials;
      },
      handelSingleMaterials(item) {
        var materialsName;
        materialsName = item.join(",");
        this.SingleproductForm.Commoditymaterials = materialsName;
        this.materials = false;
        this.materialslist = [];
      },
      // 选择确定类型
      handelselectType(item) {
        this.SingleproductForm.cakeType = item;
        this.GoodsInfocakeType = this.SingleproductForm.cakeType;
        this.caketype = false;
      },
      handelcategoryName(item) {
        if (item[0] == '1670323326059520') {
          this.materialsShow = true;
        } else {
          this.materialsShow = false;
        }
        this.SingleproductForm.categoryId = item[1];
        // this.categoryId= item[1];
        var str = [];
        this.cakelist.map(parent => {
          parent.children.map(child => {
            if (item[1] === child.value) {
              str.push(child)
            }
          })
        })
        this.GoodsInfocakeType = str[0].label;
      },


      handelcategoryzeName(item) {
        if (item[0] == '1670323326059520') {
          this.materialsShow = true;
        } else {
          this.materialsShow = false;
        }
        this.CommodityFormList.categoryId = item[1];
        var str = [];
        this.cakelist.map(parent => {
          parent.children.map(child => {
            if (item[1] === child.value) {
              str.push(child)
            }
          })
        })
        this.GoodsInfocakeType = str[0].label;
      },
      handlematerialzhName(values, item) {
        if (this.checkedmaterialslist.length >= 10) {
          this.$message({
            message: "该商品原料最多可添加10个",
            type: "warning"
          });
          return false
        } else {
          var materialslists = [],
            SelectedmaterialsList = [];
          item.map(child => {
            materialslists.push(child.value);
            SelectedmaterialsList.push({
              materialId: child.value,
              materialName: child.label,
              parentId: child.parentId,
            });
          })
          this.materialslists = materialslists;
          this.checkedmaterialslist = SelectedmaterialsList;
        }
      },
      handlsearchsumbit() {
        //组合选择确定
        this.commodityserchshow = false;
      },
      handelcancelcommodityserch() { //item
        this.commodityserchshow = false;
      },
      handlematerialName(values, item) {
        if (this.checkedmaterialslist.length >= 10) {
          this.$message({
            message: "该商品原料最多可添加10个",
            type: "warning"
          });
          return false
        } else {
          var materialslists = [],
            SelectedmaterialsList = [];
          item.map(child => {
            materialslists.push(child.value);
            SelectedmaterialsList.push({
              materialId: child.value,
              materialName: child.label,
              parentId: child.parentId,
            });
          })
          this.materialslists = materialslists;

          this.checkedmaterialslist = SelectedmaterialsList;

        }
      },

      handleDelete_specification(index) {
        //删除规格
        this.$confirm("此操作将永久删除该规格, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            if (this.SingleproductForm.goodsSkuRequests.length <= 1) {
              this.$message({
                type: "warning",
                message: "至少留一个商品规格，不可移除!"
              });
            } else {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.SingleproductForm.goodsSkuRequests.splice(index, 1);
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      },
      handleAdd_specification() {
        //添加规格
        if (this.SingleproductForm.goodsSkuRequests.length <= 10) {
          this.SingleproductForm.goodsSkuRequests.push({
            specs: "", //规格名
            modifyPrice: "", // 定价
            skuCode: "", // sku 码
            upc: "", // uPc
            goodsState: 1, //商品状态
            isCombination: 1,
            goodsSkuProduction: null,
            materielState: 2,
          });
        } else {
          this.$message({
            message: "该商品规格最多可添加10个",
            type: "warning"
          });
          return false
        }
      },
      createSingleData(item, verification) {
        this.$refs[verification].validate((valid) => {
          if (valid) {
            if (this.materialName == "蛋糕") {
              if (this.materialslists == '') {
                this.$message("请选择蛋糕原料");
                return false;
              }
            }
            if (item.goodsSkuRequests && item.goodsSkuRequests.length) {
              const specsValid = item.goodsSkuRequests.every(item => {
                return item.specs;
              });
              const specsValids = item.goodsSkuRequests.every(item => {
                if (item.specs <= 0) {
                  return false;
                } else {
                  return true;
                }
              });
              const priceValid = item.goodsSkuRequests.every(item => item.price);
              // const upcValid = item.goodsSkuRequests.every(item => item.upc);
              const skuCodeValid = item.goodsSkuRequests.every(item => {
                return item.skuCode
              });
              if (!specsValid) {
                this.$message("规格名必填");
                return false;
              } else if (!specsValids) {
                this.$message("规格名的值必须大于0");
                return false;
              } else if (!priceValid) {
                this.$message("单价必填");
                return false;
              } else if (!skuCodeValid) {
                this.$message("sku码必填");
                return false;
              }

              // else if (!upcValid) {
              //   this.$message("upc码必填");
              //   return false;
              // }
            }
            var piclist = [];
            item.pics.map(child => {
              piclist.push(child.url)
            })

            var goodsSkuRequests = [];
            item.goodsSkuRequests.map(item => {
              goodsSkuRequests.push({
                goodsState: item.goodsState,
                isCombination: item.isCombination,
                price: item.price * 100,
                skuCode: item.skuCode,
                specs: item.specs,
                upc: item.upc,
                goodsSkuProduction:null,
                materielState:2,
              })
            })
            var str = [];
            this.cakelist.map(parent => {
              parent.children.map(child => {
                if (item.categoryId === child.value) {
                  str.push(parent)
                }
              })
            })
            if (str && str.length > 0) {
              if (str[0].value == '1670323326059520') {
                if (this.materialslists == '') {
                  this.$message("请选择蛋糕原料");
                  return false;
                }
              }
            }
            //单个商品新增提交
            const Singleproduct = {
              parentCategoryId: str[0].value,
              categoryName: str[0].label,
              deptId: this.clickFramingchecked == true ? '1' : this.cityareaId,
              name: item.name,
              categoryId: item.categoryId,
              materialId: this.materialslists,
              mainPic: item.mainPic,
              pics: piclist,
              description: item.description,
              isCombination: 1,
              goodsSkuRequests: goodsSkuRequests,
              goodsCombinationRequests: []
            };
            addGoods(Singleproduct).then(res => {
              if (res.data.code == 200) {
                this.dialogFormVisible = false;
                this.$notify({
                  title: "添加商品",
                  message: "添加商品成功",
                  type: "success",
                  duration: 2000
                });
                this.getList();
                this.dialogFormVisible = false;
                this.$refs[verification].resetFields();
                this.cakelist = [];
                this.selectedValue = [];
                this.materialslistValue = [];
                this.SingleproductForm = {
                  name: "",
                  cakeType: "",
                  categoryId: "",
                  materialId: "",
                  Commoditymaterials: "", // 商品原料
                  mainPic: "", //  主图
                  pics: [], //附图
                  description: "",
                  goodsSkuRequests: [{
                    specs: "", //规格名
                    price: "", // 定价
                    skuCode: "", // sku 码
                    upc: "", // uPc
                    goodsState: 1, //商品状态
                    isCombination: 1
                  }]
                };
              } else {
                this.$notify({
                  title: "sku码重复",
                  message: "sku码重复!请重新填写",
                  type: "success",
                  duration: 2000
                });
              }
            });

          } else {
            // console.log('error submit!!');
            return false;
          }
        });

      },

      updateSingleData(item, GoodsInfocakeType, verification) {
        this.$refs[verification].validate((valid) => {
          if (valid) {
            if (item.goodsSkuRequests && item.goodsSkuRequests.length) {
              const specsValid = item.goodsSkuRequests.every(item => {
                return item.specs;
              });
              const specsValids = item.goodsSkuRequests.every(item => {
                if (item.specs <= 0) {
                  return false;
                } else {
                  return true;
                }
              });
              const priceValid = item.goodsSkuRequests.every(item => {
                return item.modifyPrice;
              });
              const priceValids = item.goodsSkuRequests.every(item => {
                if (item.modifyPrice <= 0) {
                  return false;
                } else {
                  return true;
                }
              });
              // const upcValid = item.goodsSkuRequests.every(item => item.upc);
              const skuCodeValid = item.goodsSkuRequests.every(item => item.skuCode);
              if (!specsValid) {
                this.$message("规格名必填");
                return false;
              } else if (!specsValids) {
                this.$message("规格名的值必须大于0");
                return false;
              } else if (!priceValid) {
                this.$message("单价必须大于0");
                return false;
              } else if (!priceValids) {
                this.$message("单价必须大于0");
                return false;
              } else if (!skuCodeValid) {
                this.$message("sku码必填");
                return false;
              }

              // else if (!upcValid) {
              //   this.$message("upc码必填");
              //   return false;
              // }
            }
            if (item.categoryId == '') {
              this.$message("请选择蛋糕类型");
              return false;
            }

            var piclist = [];
            item.pics.map(child => {
              piclist.push(child.url)
            })
            var materialIds = [];
            if (this.checkedmaterialslist) {
              this.checkedmaterialslist.map(item => {
                materialIds.push(item.materialId)
              })
            }
            var str = [];
            this.cakelist.map(parent => {
              parent.children.map(child => {
                if (item.categoryId === child.value) {
                  str.push(parent)
                }
              })
            })
            if (str && str.length > 0) {
              if (str[0].value == '1670323326059520') {
                if (materialIds == '') {
                  this.$message("请选择蛋糕原料");
                  return false;
                }
              }
            }
            var goodsSkuRequests = [];
            item.goodsSkuRequests.map(item => {
              goodsSkuRequests.push({
                id: item.id,
                goodsState: item.goodsState,
                isCombination: item.isCombination,
                price: item.modifyPrice * 100,
                skuCode: item.skuCode,
                specs: item.specs,
                upc: item.upc,
                goodsSkuProduction:null,
                materielState:2,
              })
            })
            //单个商品编辑提交
            const SingleproductForm = {
              deptId: this.clickFramingchecked == true ? '1' : this.cityareaId,
              parentCategoryId: str[0].value,
              categoryName: str[0].label,
              id: item.id,
              name: item.name,
              categoryId: item.categoryId,
              materialId: materialIds,
              mainPic: item.mainPic,
              pics: piclist,
              description: item.description,
              isCombination: 1,
              goodsSkuRequests: goodsSkuRequests,
              goodsCombinationRequests: [],
              isOnSale: 1
            };
            goodsUpdate(SingleproductForm).then(res => {
              if (res.data.code == 200) {
                this.dialogFormVisible = false;
                this.$notify({
                  title: "修改商品",
                  message: "修改商品成功",
                  type: "success",
                  duration: 2000
                });
                this.getList();
                this.cakelist = [];
                this.SingleproductForm = {
                  name: "",
                  cakeType: "",
                  categoryId: "",
                  materialId: "",
                  Commoditymaterials: "", // 商品原料
                  mainPic: "", //  主图
                  pics: [], //附图
                  description: "",
                  goodsSkuRequests: [{
                    specs: "", //规格名
                    price: "", // 定价
                    skuCode: "", // sku 码
                    upc: "", // uPc
                    goodsState: 1, //商品状态
                    isCombination: 1
                  }]
                };
              } else {
                this.$notify({
                  title: "sku码重复",
                  message: "sku码重复!请重新填写",
                  type: "success",
                  duration: 2000
                });
              }
            })

          } else {
            // console.log('error submit!!');
            return false;
          }
        });

      },
      //组合商品-----------------------------------------------
      handleCommodity() {
        //添加组合商品
        this.diaCommodityStatus = "create";
        this.showbutton = !this.showbutton;
        this.dialogCommodityVisible = true;
        this.SingleproductForm.pics = [];
        this.getCategoriesList();
        this.getcakelist(); //查蛋糕类型
        this.selectedValue = [];
        this.materialslistValue = [];
        this.CommodityFormList = {
          name: "",
          cakeType: "",
          categoryId: "",
          materialId: "",
          description: "",
          Commoditymaterials: "", // 商品原料
          mainPic: "", //  主图
          pics: [], //附图
          commodityserch: "",
          goodsState: 1, //商品状态
          goodsCombinationList: [], //组合数据
          price: "", // 定价
          skuCode: "", // sku 码
          upc: "", // uPc
          zuModifyPrice: ''
        }
      },
      handelcancelcommodity() {
        this.CommodityFormList.cakeType = "";
        this.caketype = !this.caketype;
      },
      handelMaterials(item) {
        var materialsName;
        materialsName = item.join(",");
        this.CommodityFormList.Commoditymaterials = materialsName;
        this.materials = !this.materials;
      },
      handlecomDeit(item) {
        if (item.deptId == 1) {
          if (this.clickFramingchecked == true) {
            //城市ID为1及选中全国
            this.$confirm('编辑商品后,全国其他城市同一商品会同步修改, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.getCategoriesList();
              this.getcakelist();
              this.showbutton = false;
              //组合编辑页面
              var materialIdlsit = [];
              this.diaCommodityStatus = "update";
              this.dialogCommodityVisible = true;
              if (item.parentCategoryId) {
                if (item.parentCategoryId == '1670323326059520') {
                  this.materialsShow = true;
                } else {
                  this.materialsShow = false;
                }
              }
              GoodsInfo({
                goodsId: item.id
              }).then(response => {
                this.CommodityFormList.name = response.data.data.name;
                this.CommodityFormList.categoryId = response.data.data.categoryId;
                this.CommodityFormList.id = response.data.data.id;
                this.CommodityFormList.mainPic = response.data.data.mainPic;
                this.CommodityFormList.description = response.data.data.description;
                this.GoodsInfocakeType = item.categoryName;
                this.CommodityFormList.pics = response.data.data.goodsPicList;
                this.checkedmaterialslist = response.data.data.goodsRelationMaterialVOList
                this.checkedmaterialslist.map(child => {
                  materialIdlsit.push(child.id)
                });
                this.CommodityFormList.materialId = materialIdlsit;
                this.CommodityFormList.goodsCombinationList = response.data.data.goodsCombinationList;
                this.CommodityFormList.pics.map(child => {
                  child.url = child.pic;
                });
                if (this.CommodityFormList.goodsCombinationList && this.CommodityFormList.goodsCombinationList.length) {
                  this.CommodityFormList.skuCode =
                    this.CommodityFormList.goodsCombinationList[0].zuSkuCode;
                  this.CommodityFormList.price =
                    this.CommodityFormList.goodsCombinationList[0].price;
                  this.CommodityFormList.zuModifyPrice =
                    this.CommodityFormList.goodsCombinationList[0].zuModifyPrice;
                  this.CommodityFormList.upc =
                    this.CommodityFormList.goodsCombinationList[0].zuUpc;
                  this.CommodityFormList.goodsState =
                    this.CommodityFormList.goodsCombinationList[0].zuGoodsState;
                }
                this.combinedData = response.data.data.goodsCombinationList; //组合 查询数据
              });
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消修改'
              });
            });

          } else {
            this.$message({
              type: 'warning',
              message: '不能编辑该商品,需要勾选全国按钮去编辑'
            });
            return false
          }
        } else {
          this.getCategoriesList();
          this.getcakelist();
          this.showbutton = false;
          //组合编辑页面
          var materialIdlsit = [];
          this.diaCommodityStatus = "update";
          this.dialogCommodityVisible = true;

          if (item.parentCategoryId) {
            if (item.parentCategoryId == '1670323326059520') {
              this.materialsShow = true;
            } else {
              this.materialsShow = false;
            }
          }
          GoodsInfo({
            goodsId: item.id
          }).then(response => {
            this.CommodityFormList.name = response.data.data.name;
            this.CommodityFormList.categoryId = response.data.data.categoryId;
            this.CommodityFormList.id = response.data.data.id;
            this.CommodityFormList.mainPic = response.data.data.mainPic;
            this.CommodityFormList.description = response.data.data.description;
            this.GoodsInfocakeType = item.categoryName;
            this.CommodityFormList.pics = response.data.data.goodsPicList;
            this.checkedmaterialslist = response.data.data.goodsRelationMaterialVOList
            this.checkedmaterialslist.map(child => {
              materialIdlsit.push(child.id)
            });
            this.CommodityFormList.materialId = materialIdlsit;
            this.CommodityFormList.goodsCombinationList = response.data.data.goodsCombinationList;
            this.CommodityFormList.pics.map(child => {
              child.url = child.pic;
            });
            if (this.CommodityFormList.goodsCombinationList && this.CommodityFormList.goodsCombinationList.length) {
              this.CommodityFormList.skuCode =
                this.CommodityFormList.goodsCombinationList[0].zuSkuCode;
              this.CommodityFormList.price =
                this.CommodityFormList.goodsCombinationList[0].price;
              this.CommodityFormList.zuModifyPrice =
                this.CommodityFormList.goodsCombinationList[0].zuModifyPrice;
              this.CommodityFormList.upc =
                this.CommodityFormList.goodsCombinationList[0].zuUpc;
              this.CommodityFormList.goodsState =
                this.CommodityFormList.goodsCombinationList[0].zuGoodsState;
            }
            this.combinedData = response.data.data.goodsCombinationList; //组合 查询数据
          });


        }

      },
      handelDialogResetCommodity(verification, complaintAdd) {
        //取消组合页面
        this.dialogCommodityVisible = false;
        this.$refs[complaintAdd].resetFields();
      },
      createcommodityData(item, verification) {
        this.$refs[verification].validate((valid) => {
          if (this.materialName == "蛋糕") {
            if (this.materialslists == '') {
              this.$message("请选择蛋糕原料");
              return false;
            }
          }
          if (valid) {
            var combinedDataCode = [];
            this.combinedDataName.map(child => {
              combinedDataCode.push({
                zuGoodsId: child.zuGoodsId,
                zuGoodsName: child.zuGoodsName,
                zuSkuCode: item.skuCode,
                zuUpc: item.upc,
                zuGoodsState: item.goodsState,
                zuPrice: item.price * 100,
                zuSpecs: child.zuSpecs
              });
            });
            this.combinedDataCode = combinedDataCode;
            var piclist = [];
            item.pics.map(child => {
              piclist.push(child.url)
            })
            var str = [];
            this.cakelist.map(parent => {
              parent.children.map(child => {
                if (item.categoryId === child.value) {
                  str.push(parent)
                }
              })
            })
            if (str && str.length > 0) {
              if (str[0].value == '1670323326059520') {
                if (this.materialslists == '') {
                  this.$message("请选择蛋糕原料");
                  return false;
                }
              }
            }
            if (item.price == '') {
              this.$message("定价必填");
              return false;
            }
            if (this.combinedDataCode == '') {
              this.$message("组合商品及sku不为空");
              return false;
            }
            //组合商品新增提交
            const SingleproductForm = {
              parentCategoryId: str[0].value,
              categoryName: str[0].label,
              deptId: this.clickFramingchecked == true ? '1' : this.cityareaId,
              name: item.name,
              categoryId: item.categoryId,
              materialId: this.materialslists,
              mainPic: item.mainPic,
              pics: piclist,
              description: item.description,
              isCombination: 2,
              goodsSkuRequests: [],
              goodsCombinationRequests: this.combinedDataCode
            };
            addGoods(SingleproductForm).then(res => {
              if (res.data.code == 200) {
                this.$notify({
                  title: "添加商品",
                  message: "添加商品成功",
                  type: "success",
                  duration: 2000
                });
                this.getList();
                this.dialogCommodityVisible = false;
                this.$refs[verification].resetFields();
                this.goodsCombinationRequests = [];
                this.selectedValue = [];
                this.materialslistValue = [];
              } else {
                this.$notify({
                  title: "sku码重复",
                  message: "sku码重复!请重新填写",
                  type: "success",
                  duration: 2000
                });
              }
            })

          } else {
            // console.log('error submit!!');
            return false;
          }
        });

      },
      updatecommodityData(item, GoodsInfocakeType, verification) {
        this.$refs[verification].validate((valid) => {
          if (valid) {
            //组合商品编辑提交
            var goodsCombinationLists = [];
            this.CommodityFormList.goodsCombinationList.map(child => {
              console.log(child, 'child')
              goodsCombinationLists.push({
                zuSkuId: child.zuSkuId,
                zuGoodsId: child.zuGoodsId,
                zuGoodsName: child.zuGoodsName,
                zuSkuCode: item.skuCode,
                zuUpc: item.upc,
                zuGoodsState: item.goodsState,
                zuPrice: item.zuModifyPrice * 100,
                zuSpecs: child.zuSpecs,
                goodsSkuProduction:null,
                materielState:2,
              });
            })
            var piclist = [];
            item.pics.map(child => {
              piclist.push(child.url)
            })

            if (item.categoryId == '') {
              this.$message("请选择蛋糕类型");
              return false;
            }
            if (item.skuCode == '') {
              this.$message("sku码必填");
              return false;
            }
            if (item.zuModifyPrice == '') {
              this.$message("定价必填");
              return false;
            }
            var materialIds = [];
            if (this.checkedmaterialslist) {
              this.checkedmaterialslist.map(item => {
                materialIds.push(item.materialId)
              })
            }
            var str = [];
            this.cakelist.map(parent => {
              parent.children.map(child => {
                if (item.categoryId === child.value) {
                  str.push(parent)
                }
              })
            })
            if (str[0]) {
              if (str[0].value == '1670323326059520') {
                if (materialIds == '') {
                  this.$message("请选择蛋糕原料");
                  return false;
                }
              }
            }

            if (goodsCombinationLists == '') {
              this.$message("组合商品及sku不为空");
              return false;
            }
            const commodityData = {
              deptId: this.clickFramingchecked == true ? '1' : this.cityareaId,
              parentCategoryId: str[0].value,
              categoryName: str[0].label,
              id: item.id,
              name: item.name,
              categoryId: item.categoryId,
              materialId: materialIds,
              mainPic: item.mainPic,
              pics: piclist,
              description: item.description,
              isCombination: 2,
              goodsSkuRequests: [],
              goodsCombinationRequests: goodsCombinationLists,
              isOnSale: 1
            };
            goodsUpdate(commodityData).then(res => {
              if (res.data.code == 200) {
                this.$notify({
                  title: "修改商品",
                  message: "修改商品成功",
                  type: "success",
                  duration: 2000
                });
                this.dialogCommodityVisible = false;
                this.goodsCombinationRequests = [];
                this.CommodityFormList.commodityserch = '',
                  // this.$refs[verification].resetFields();
                  this.getList();

              } else {
                this.$notify({
                  title: "sku码重复",
                  message: "sku码重复!请重新填写",
                  type: "success",
                  duration: 2000
                });
              }
            });

          } else {
            // console.log('error submit!!');
            return false;
          }
        });
      },
      // 组合
      handlecommodityserch(name) {
        searchGoodsList({
          deptId: this.clickFramingchecked == true ? '1' : this.cityareaId,
          name: name
        }).then(response => {
          // const batchdata = response.data.data;
          // const dataValueBatch = batchdata =>
          //   batchdata.map(
          //     ({
          //       id,
          //       name,
          //       goodsSkuList,
          //     }) =>
          //     goodsSkuList ? {
          //       value: id,
          //       label: name,
          //       children: dataValueBatch(goodsSkuList),
          //     } : {
          //       value: id,
          //       label: name
          //     }
          //   );
          // this.combinedData = dataValueBatch(batchdata)
          this.combinedData = response.data.data;
          if (this.combinedData && this.combinedData.length) {
            this.commodityserchshow = true;
          } else {
            this.$message("无此商品名称请重新输入");
            this.commodityserchshow = false;
          }

        });
      },
      handleGoodsList(name, specs, skuId) {
        this.commodityserchshow = false;
        if (this.CommodityFormList.goodsCombinationList.length < 20) {
          this.CommodityFormList.goodsCombinationList.push({
            zuGoodsId: skuId,
            zuGoodsName: name,
            zuSpecs: specs
          });
          this.combinedDataName.push({
            zuGoodsId: skuId,
            zuGoodsName: name,
            zuSpecs: specs
          });

        } else {
          this.$message({
            message: "该商品规格最多可添加20个",
            type: "warning"
          });
          return false
        }
      },
      headleclose() {
        this.commodityserchshow = false;
      },

    }
  };
</script>

<style lang="scss">
  .rows {
    display: flex;
    justify-content: space-around;
  }

  .el-cascader {
    display: inline-block;
    position: relative;
    font-size: 14px;
    line-height: 40px;
  }



  .el-cascader__tags {
    position: absolute;
    left: 0;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-wrap: wrap;
    line-height: normal;
    text-align: left;
    box-sizing: border-box;
  }

  table tr,
  table tr td {
    border: 1px solid #dfe4ed;
    border-bottom: 1px solid #ebeef5 !important;
    border-top: none !important;
    border-left: none !important;
  }

  .el-input.is-disabled .el-input__inner {
    color: #606266;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 148px;
    height: 148px;
    line-height: 148px;
    text-align: center;
  }

  .avatar {
    width: 148px;
    height: 148px;
    display: block;
  }

  .Singleproduct {
    .el-form-item {
      margin-bottom: 30px !important;
    }

    .select-head-cont {
      // border: 1px solid #dcdfe6;
      // height: 32px;
      background-color: #fff;
      width: 200px;
      border-radius: 4px;
      display: block;
      position: relative;

      .selct-img {
        width: 10px;
        height: 10px;
        position: absolute;
        right: 10px;
        top: 0;
        bottom: 0;
        margin: auto;
      }
    }

    .el-tabs__item.is-active {
      color: #fff;
      background: #409eff;
      text-align: center !important;
    }

    .el-tabs--left .el-tabs__item.is-left {
      text-align: center !important;
    }

    el-tabs__nav-wrap::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 2px;
      /* background-color: #E4E7ED; */
      z-index: 1;
    }

    .caketype {
      border: 1px solid #dcdfe6;
      border: 1px solid #e4e7ed;
      border-radius: 4px;
      background-color: #fff;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      box-sizing: border-box;
      margin: 5px 0;
      width: 300px;
      position: relative;

      &:after {
        position: absolute;
        display: block;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        top: 1px;
        margin-left: -6px;
        border-top-width: 0;
        border-bottom-color: #fff;
      }

      .el-radio-group {
        display: flex;
        flex-direction: column;
        padding: 10px 0;
        background-origin: padding-box;
        line-height: 30px;
        height: 170px;
        overflow: hidden;
        overflow-y: scroll;

        .el-radio {
          line-height: 30px;
        }
      }

      .el-checkbox-group {
        display: flex;
        flex-direction: column;
        padding: 10px 0;
        background-origin: padding-box;
        line-height: 30px;
        height: 170px;
        overflow: hidden;
        overflow-y: scroll;

        .el-radio {
          line-height: 30px;
        }
      }

      .buttontips {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 10px;
        margin-right: 10px;
      }
    }

    .specifications {
      .title {
        display: flex;
        line-height: 30px;
        color: #ff0000;
        font-size: 15px;

        img {
          width: 30px;
          height: 30px;
          margin-right: 8px;
        }
      }



      .rows {
        display: flex;
        border-bottom: 1px solid #d9d9d9;
        margin-bottom: 10px !important;

        .el-form-item {
          display: flex;
          flex-direction: column;
          margin-bottom: 10px !important;

          .el-form-item__label {
            text-align: left;
          }

          .el-form-item__content {
            margin-left: 0 !important;
          }
        }

        .Delete_specification {
          margin-top: 20px;
          display: flex;

          span {
            line-height: 28px;
            font-size: 15px;
            color: #ff0000;
            padding-left: 5px;
          }

          .icondelete {
            width: 25px;
            height: 25px;
          }
        }
      }
    }
  }

  .Commodityproduct {
    .el-form-item {
      margin-bottom: 30px !important;
    }

    .select-head-cont {
      // border: 1px solid #dcdfe6;
      // height: 32px;
      background-color: #fff;
      width: 200px;
      border-radius: 4px;
      display: block;
      position: relative;

      .selct-img {
        width: 10px;
        height: 10px;
        position: absolute;
        right: 10px;
        top: 0;
        bottom: 0;
        margin: auto;
      }
    }

    .el-tabs__item.is-active {
      color: #fff;
      background: #409eff;
      text-align: center !important;
    }

    .el-tabs--left .el-tabs__item.is-left {
      text-align: center !important;
    }

    el-tabs__nav-wrap::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 2px;
      /* background-color: #E4E7ED; */
      z-index: 1;
    }

    .caketype {
      border: 1px solid #dcdfe6;
      border: 1px solid #e4e7ed;
      border-radius: 4px;
      background-color: #fff;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      box-sizing: border-box;
      margin: 5px 0;
      width: 300px;
      position: relative;

      &:after {
        position: absolute;
        display: block;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        top: 1px;
        margin-left: -6px;
        border-top-width: 0;
        border-bottom-color: #fff;
      }

      .el-radio-group {
        display: flex;
        flex-direction: column;
        padding: 10px 0;
        background-origin: padding-box;
        line-height: 30px;
        height: 170px;
        overflow: hidden;
        overflow-y: scroll;

        .el-radio {
          line-height: 30px;
        }
      }

      .el-checkbox-group {
        display: flex;
        flex-direction: column;
        padding: 10px 0;
        background-origin: padding-box;
        line-height: 30px;
        height: 170px;
        overflow: hidden;
        overflow-y: scroll;

        .el-radio {
          line-height: 30px;
        }
      }

      .buttontips {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 10px;
        margin-right: 10px;
      }
    }

    .specificationsslist {
      padding: 10px;
      border: 1px solid #dcdfe6;
      border: 1px solid #e4e7ed;
      border-radius: 4px;
      background-color: #fff;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      box-sizing: border-box;
      margin: 5px 0;
      width: 400px;
      height: 200px;
      position: absolute;
      width: 100%;
      z-index: 999;

      .el-tabs--left .el-tabs__header.is-left {
        width: 80%;
      }

      .close {
        position: absolute;
        top: 0;
        right: 0;
      }

      .el-checkbox-group {
        display: flex;
        flex-direction: column;
        padding: 10px 0;
        background-origin: padding-box;
        line-height: 30px;
        height: 170px;
        overflow: hidden;
        overflow-y: scroll;

        .el-radio {
          line-height: 30px;
        }
      }

      .buttontips {
        position: absolute;
        bottom: 0;
        right: 0;
        display: flex;
        justify-content: flex-end;
        margin-bottom: 10px;
        margin-right: 10px;
      }
    }

    .specifications {
      .lows {
        display: flex;
        justify-content: space-around;

        .el-form-item {
          display: flex;
          flex-direction: column;

          .el-form-item__label {
            text-align: left;
          }

          .el-form-item__content {
            margin-left: 0 !important;
          }
        }
      }
    }
  }

  .app-container {
    padding: 20px;

    .filter_container {
      .rows {
        display: flex;
        justify-content: space-between;
      }

      .el-form-item {
        margin-bottom: 22px !important;
      }

      .lows {
        display: flex;
        justify-content: flex-end;
      }

      .addshop {
        position: relative;

        .showbutton {
          position: absolute;
          width: 90px;
          color: #409eff;
          border: 1px solid #b3d8ff;
          background: #fff;
          text-align: center;
          box-sizing: border-box;
          outline: none;
          font-weight: 500;
          padding: 12px 20px;
          font-size: 12px;
          border-radius: 3px;
          z-index: 999;
          top: 34px;
        }
      }
    }

    .table_lists {
      .warning-row {
        background: #fdf5e6;
        color: #e6a23c;
      }

      .cell {
        padding: 0 2px !important;
      }
    }

  }


  .createshop {
    display: flex;
    justify-content: space-between;

    .left {
      width: 18%;
      font-size: 20px;
    }

    .right {
      width: 78%;

      .flex {
        display: flex;
        margin-bottom: 10px;

        .title {
          text-align: right;
          float: left;
          font-size: 14px;
          color: #606266;
          line-height: 32px;
          padding: 0 12px 0 0;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
        }
      }
    }
  }
</style>
